<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>成绩查询</title>
</head>
<body>
    <h1>提交成绩</h1>
    <form id="submitForm">
        <label for="student_id">学号:</label>
        <input type="text" id="student_id" name="student_id" required><br><br>

        <label for="name">姓名:</label>
        <input type="text" id="name" name="name" required><br><br>

        <label for="course_name">专业课程名:</label>
        <input type="text" id="course_name" name="course_name" required><br><br>

        <label for="grade">成绩:</label>
        <input type="number" step="0.01" id="grade" name="grade" required><br><br>

        <button type="submit">提交</button>
    </form>

    <h2>历史记录</h2>
    <div id="records"></div>

    <script>
        document.getElementById('submitForm').addEventListener('submit', function(event) {
            event.preventDefault();

            const formData = new FormData(event.target);
            const data = {};
            formData.forEach((value, key) => {
                data[key] = value;
            });

            fetch('/submit', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(data)
            })
            .then(response => response.json())
            .then(data => {
                if (data.error) {
                    alert(data.error);
                } else {
                    alert(data.message);
                    loadRecords();
                }
            })
            .catch(error => console.error('Error:', error));
        });

        function loadRecords() {
            fetch('/records')
            .then(response => response.json())
            .then(data => {
                const recordsDiv = document.getElementById('records');
                recordsDiv.innerHTML = '';
                data.forEach(record => {
                    const recordDiv = document.createElement('div');
                    recordDiv.textContent = `学号: ${record.student_id}, 姓名: ${record.name}, 课程: ${record.course_name}, 成绩: ${record.grade}`;
                    recordsDiv.appendChild(recordDiv);
                });
            })
            .catch(error => console.error('Error:', error));
        }

        // Load records on page load
        window.onload = loadRecords;
    </script>
</body>
</html>